<template>
	<div style="padding:0 37px 0 44px">
		<!--<div v-show="flag">
			<div class="filter-container">
				<el-input style="width: 180px;" :placeholder="$t('inputBox.merchantName')" v-model="searchDeviceData.merchantName"> </el-input>
				<el-input style="width: 180px;" :placeholder="$t('inputBox.codeNo')" v-model="searchDeviceData.barCode"> </el-input>
				<el-date-picker :editable=false style="width: 180px;" class="filter-item" type="date" :placeholder="$t('inputBox.startDate')" v-model="searchDeviceData.startDate"></el-date-picker>
				<el-date-picker :editable=false style="width: 180px;" class="filter-item" type="date" :placeholder="$t('inputBox.endDate')" v-model="searchDeviceData.endDate"></el-date-picker>
				<el-select :placeholder="$t('inputBox.currentState')" v-model="searchDeviceData.state" clearable class='filter-item condition'>
					<el-option :value="$t('inputBox.unbound')"></el-option>
					<el-option :value="$t('inputBox.bindings')"></el-option>
					<el-option :value="$t('inputBox.disable')"></el-option>
					<el-option :value="$t('inputBox.enable')"></el-option>
				</el-select>
				<el-input style="width: 180px;" :placeholder="$t('inputBox.minimumExchangeRate')" v-model="searchDeviceData.minRate"> </el-input>
				<el-input style="width: 180px;" :placeholder="$t('inputBox.maximumExchangeRate')" v-model="searchDeviceData.maxRate"> </el-input>
				<el-button class="blue-btn mini2-btn" @click="handleFilter()">{{$t('inputBox.query')}}</el-button>
				<el-button class='blue-btn mini2-btn' @click="delSelect()">{{$t('inputBox.empty')}}</el-button>
				<el-button class='blue-btn mini2-btn' @click='addsolidCode()'>{{$t('inputBox.distributionFixedCode')}}</el-button>
			</div>
	  	</div>			-->
			<!--搜索输入框-->
		<div class="search" v-show="flag">
	  		<div class="search-input">
	  			<div>
	  				<label>{{ $t('mer.Merchant') }}：</label>
	  				<el-input v-model="searchDeviceData.merchantName" class="block-ipt"></el-input>
	  			</div>
	  			<div>
	  				<label>{{ $t('inputBox.codeNo') }}：</label>
	  				<el-input v-model="searchDeviceData.barCode" class="block-ipt"></el-input>
	  			</div>
	  			<div>
	  				<label>{{ $t('inputBox.startDate') }}：</label>
	  				<el-date-picker v-model="searchDeviceData.startDate" :editable=false class="filter-item block-ipt" type="date"></el-date-picker>
	  			</div>
	  			<div>
	  				<label>{{ $t('inputBox.endDate') }}：</label>
	  				<el-date-picker v-model="searchDeviceData.endDate" :editable=false class="filter-item block-ipt" type="date"></el-date-picker>
	  			</div>
	  			<div>
					<label for="">{{ $t('salesman.Status') }}：</label>
					<el-select :placeholder="$t('placeH.All')" v-model="searchDeviceData.state" clearable class='filter-item condition block-ipt'>
						<el-option :value="$t('inputBox.unbound')"></el-option>
						<el-option :value="$t('inputBox.bindings')"></el-option>
						<el-option :value="$t('inputBox.disable')"></el-option>
						<el-option :value="$t('inputBox.enable')"></el-option>
					</el-select>
				</div>
	  		</div>
	  		<div class="search-btn">
	  			<el-button class="blue-btn mini2-btn" @click="handleFilter()">{{$t('button.search')}}</el-button>
				<el-button class='blue-btn mini2-btn' @click="delSelect()">{{$t('button.Reset')}}</el-button>
				<el-button class='blue-btn max-btn btn-clearance' @click='addsolidCode()'>{{$t('inputBox.distributionFixedCode')}}</el-button>
	  		</div>

			<!--列表-->
			<el-table height=500 border fit highlight-current-row :data='solidCodeDatas'>
				<el-table-column align="center" :label="$t('index.Number')" fixed="left" width="70" type='index'> </el-table-column>
				<el-table-column width="150px" align="center" :label="$t('inputBox.fixedCodeID')" prop="solidCodeId">
				</el-table-column>
				<el-table-column width="180px" align="center" :label="$t('inputBox.codeNo')" prop="barCode">
				</el-table-column>
				<el-table-column width="160px" align="center" :label="$t('mer.Merchant')" prop="merchantName">
				</el-table-column>
				<el-table-column width="150px" align="center" :label="$t('inputBox.exchangeRate')" prop="merchantRate">
				</el-table-column>
				<el-table-column width="200px" align="center" :label="$t('inputBox.generationDate')" prop="creationDate">
				</el-table-column>
				<el-table-column width="200px" align="center" :label="$t('inputBox.bindingDate')" prop="bindingDate">
				</el-table-column>
				<el-table-column width="120px" align="center" :label="$t('salesman.Status')" prop="state" :formatter="judge">
				</el-table-column>
				<el-table-column width="150px" align="center" :label="$t('index.Operation')">
					<template slot-scope="scope">
						<el-button type="success" v-if="scope.row.state==0 || scope.row.state==1 || scope.row.state==3" :disabled="true" size="small">{{$t('button.Enabled')}}</el-button>
						<el-button type="success" v-else :disabled="false" size="small" @click="update(scope.row.barCode,scope.row.merchantName,scope.row.solidCodeId,scope.row.state)">{{$t('button.Enabled')}}</el-button>
						<el-button type="success" v-if="scope.row.state==3" :disabled="false" size="small" @click="disable(scope.row.barCode,scope.row.merchantName,scope.row.solidCodeId,scope.row.state)">{{$t('button.Suspended')}}</el-button>
						<el-button type="success" v-else :disabled="true" size="small">{{$t('button.Suspended')}}</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!--页-->
			<div class="pagination-container">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="searchDeviceData.page" :page-sizes="[10,20,30, 50]" :page-size="searchDeviceData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.total"></el-pagination>
			</div>

		</div>

		<!--分配固码-->
		<div class="solidCode" v-show="!flag">
			<template>
				<el-tabs v-model="activeName">
					<el-tab-pane :label="$t('inputBox.toTheMerchant')" name="first">
						<!--客户-->
						<div>
							<div style="margin-bottom: 10px;">
								<el-input style="width: 180px;" v-model="searchSolidData.region" :disabled="true"></el-input>
								<el-autocomplete style="width:200px;margin-left: 30px;" v-model="restaurants.name" :fetch-suggestions="querySearchAsync" :trigger-on-focus="false" :placeholder="$t('inputBox.pleaseEnterTheMerchantName')" @select="handleSelect"></el-autocomplete>
							</div>
							<div>
								<el-select :placeholder="$t('inputBox.chooseBranch')" clearable v-model="searchSolidData.shopId" class='filter-item condition'>
									<el-option v-for="(item,i) in merchantShopDatas" :key="i" :label="item.shopName" :value="item.shopId">
									</el-option>
								</el-select>
								<el-input style="width: 180px;margin: 0 30px;" :placeholder="$t('inputBox.bindingNumber')" v-model="searchSolidData.bindNumber" min="1" max="10"> </el-input>
								<el-button type="success" style="width: 120px;" @click="generateSolidCode()">{{$t('inputBox.generatingAndBindingSolidCode')}}</el-button>
							</div>
							<div class="code-box">
								<ul>
									<!--<i class="el-icon-arrow-left"></i>-->
									<li v-for="item in solidData">
										<p>{{item}}</p>
										<img src="http://pic.baike.soso.com/ugc/baikepic2/30581/20170705174723-104220356.jpg/0" alt="" />
										<p>{{$t('inputBox.bindings')}}</p>
									</li>
									<!--<i class="el-icon-arrow-right"></i>-->
								</ul>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</template>
		</div>

	</div>
</template>

<script>
	import { merchantAll, searchSolidCode, solidCodePage, merchantShop, solidCode, agentNumFun, solidCode2, updateSolidCodeData } from 'api/solidCode/index';
	export default {
		name: 'solid',
		data() {
			return {
				companyId:localStorage.getItem('companyId'),
				solidCodeVisible: false,
				activeName: 'first',
				merchantDatas: [],
				merchantShopDatas: [],

				//商户搜索所需参数
				searchSolidData: {
					name: '',
					merchantId: null,
					shopId: null,
					region: localStorage.getItem('companyId')=== '2' ? '澳大利亚' : '香港',
					store: '',
					storeChild: '',
					bindNumber: '',
				},
				//按条件查询所需参数
				searchDeviceData: {
					barCode: '',
					merchantName: '',
					solidCodeId: '',
					page: 1,
					pageSize: 10,
					startDate: '',
					endDate: '',
					state: '',
				},
				//第一次进商户查询默认展示的数据所需的参数
				merchantFormData: {
					//					startTime:(new Date(new Date().setMonth((new Date().getMonth()-1)))).Format("yyyy-MM-dd"),
					//					endTime:(new Date()).Format("yyyy-MM-dd")
				},
				flag: true,
				list: null,
				//返回数据
				solidDatas: [],
				listLoading: true,
				solidCodeFormData: {},
				solidCodeDatas: [],
				//生成固码返回数据
				solidData: [],
				//查询代理Id返回数据
				agentDatas: [],
				//生成代理商固码返回数据
				agentSolidCode: [],
				res: [],
				//绑定固码更新的数据
				updateSolidCodeData: {
					merchantName: undefined,
					solidCodeId: undefined,
					creationDate: undefined,
					bindingDate: undefined,
					barCode: undefined,
					state: undefined
				},
				restaurants: [],
				agentData: [],
				agentName: ''
			}
		},
		created() {
			//			console.log(this.merchantFormData); //打印首次进入商户查询页面调用商户查询所需的参数
			this.getMerchantList(this.merchantFormData);
		},
		mounted() {
			//			this.getData();
		},
		methods: {
			//清空筛选条件
			delSelect() {
				this.searchDeviceData.barCode = '';
				this.searchDeviceData.merchantName = '';
				this.searchDeviceData.solidCodeId = '';
				this.searchDeviceData.maxRate = '';
				this.searchDeviceData.startDate = '';
				this.searchDeviceData.endDate = '';
				this.searchDeviceData.state = '';
				this.handleFilter();
			},
			//判断商户状态
			judge(data) {
				if(data.state == '0') {
					return this.solidCodeDatas.state = this.$t('inputBox.unbound');
				}
				if(data.state == '1') {
					return this.solidCodeDatas.state = this.$t('inputBox.bindings');
				}
				if(data.state == '2') {
					return this.solidCodeDatas.state = this.$t('inputBox.disable');
				}
				if(data.state == '3') {
					return this.solidCodeDatas.state = this.$t('inputBox.enable');
				}
			},

			handleClose(done) {
				done();
			},
			//根据商户id查询店铺
			searchMerchantShop(value) {
				//商户Id
				this.searchSolidData.merchantId = value;
				merchantShop(value).then(res => {
					this.merchantShopDatas = res.value;
					// console.log(this.merchantShopDatas)
//					if(res.value.total == 0) {
//						this.$message({
//							showClose: true,
//							message: this.$t('inputBox.queryErr'),
//							type: 'error'
//						});
//					}
				}).catch(error => {
					console.log(error);
				})
			},
			addsolidCode() {
				this.flag = false;
			},
			//搜索商户信息
			querySearchAsync(queryString, cb) {
				var restaurants = [];
				//调用的后台接口
				if(this.restaurants.name != undefined) {
					merchantAll({ name: this.restaurants.name, companyId: localStorage.getItem('companyId') }).then(res => {
						restaurants = res.value.list;
						for(let i of res.value.list) {
							i.value = i.name;
						}
						cb(restaurants)
					}).catch(error => {
						console.log(error);
					})
				}
			},
			handleSelect(item) {
				this.searchMerchantShop(item.id);
			},
			//商户生成固码
			generateSolidCode() {
				this.generateSolidCodeFun(this.searchSolidData)
			},
			generateSolidCodeFun(value) {
				solidCode(value).then(res => {
					if(res.code == -1) {
						this.$message({
							showClose: true,
							message: this.$t('hint.BuildFailed'),
							type: 'error'
						});
					}
					this.solidData = res.value;
				}).catch(error => {
					console.log(error);
				})
			},
			//搜索代理信息
			agentQuerySearchAsync(queryString, cb) {
				let agentData = [];
				//调用的后台接口
				if(this.agentName != undefined) {
					agentNumFun(this.agentName).then(res => {
						agentData = res.value;
						for(let i of res.value) {
							i.value = i.name;
						}
						cb(agentData)
					}).catch(error => {
						console.log(error);
					})
				}
			},
			generateCodeFun(value) {
				solidCode2(value).then(res => {
					if(res.code == -1) {
						this.$message({
							showClose: true,
							message: this.$t('hint.BuildFailed'),
							type: 'error'
						});
					}
					this.agentSolidCode = res.value;
				}).catch(error => {
					console.log(error);
				})

			},
			//点击查询
			handleFilter() {
				const searchDeviceData = {
					barCode: this.searchDeviceData.barCode,
					endDate: this.searchDeviceData.endDate,
					merchantName: this.searchDeviceData.merchantName,
					solidCodeId: this.searchDeviceData.solidCodeId,
					startDate: this.searchDeviceData.startDate,
					state: this.searchDeviceData.state,
					page: this.searchDeviceData.page,
					pageSize: this.searchDeviceData.pageSize,
				}
				this.formatObj(searchDeviceData);
//				if(searchDeviceData.barCode === '') {
//					searchDeviceData.barCode = null;
//				}
//				if(searchDeviceData.endDate === '') {
//					searchDeviceData.endDate = null;
//				}
//				if(searchDeviceData.merchantName === '') {
//					searchDeviceData.merchantName = null;
//				}
//				if(searchDeviceData.solidCodeId === '') {
//					searchDeviceData.solidCodeId = null;
//				}
//				if(searchDeviceData.startDate === '') {
//					searchDeviceData.startDate = null;
//				}
//				if(searchDeviceData.state === '') {
//					searchDeviceData.state = null;
//				}
				if(searchDeviceData.state == this.$t('inputBox.unbound')) {
					searchDeviceData.state = 0;
				}
				if(searchDeviceData.state == this.$t('inputBox.bindings')) {
					searchDeviceData.state = 1;
				}
				if(searchDeviceData.state == this.$t('button.Suspended')) {
					searchDeviceData.state = 2;
				}
				if(searchDeviceData.state == this.$t('button.Enabled')) {
					searchDeviceData.state = 3;
				}

				// console.log(searchDeviceData, 1);
				this.getMerchantList(searchDeviceData);
			},
			//获得固码列表的方法  
			getMerchantList(value) {
				value.companyId = localStorage.getItem('companyId');
				searchSolidCode(value).then(res => {
					this.res = res.value;
					this.solidCodeDatas = res.value.rows;
					// console.log(this.solidCodeDatas)
//					if(res.value.total == 0) {
//						this.$message({
//							showClose: true,
//							message: this.$t('hint.NoData'),
//							type: 'error'
//						});
//					}
				}).catch(error => {
					console.log(error);
				})
			},
			//点击启用按钮事件
			update(barCode, merchantName, solidCodeId, state) {
				let DisableState = {
					barCode: barCode,
					merchantName: merchantName,
					solidCodeId: solidCodeId,
					state: 3
				}
//				console.log(DisableState);
				updateSolidCodeData(DisableState).then(res => {
					this.handleFilter();
					if(res.value == '2') {
						return this.updateSolidCodeData.state = '停用'
					}
					if(res.value == '3') {
						return this.updateSolidCodeData.state = '启用'
					}
				}).catch(error => {
					console.log(error);
				})
			},
			//点击停用按钮事件
			disable(barCode, merchantName, solidCodeId, state) {
				let DisableState = {
					barCode: barCode,
					merchantName: merchantName,
					solidCodeId: solidCodeId,
					state: 2
				}
				// console.log(DisableState)
				updateSolidCodeData(DisableState).then(res => {
					this.handleFilter();
					if(res.value == '2') {
						return this.updateSolidCodeData.state = '停用'
					}
					if(res.value == '3') {
						return this.updateSolidCodeData.state = '启用'
					}
				}).catch(error => {
					console.log(error);
				})
			},
			//获得固码列表分页的方法  
			getMerchantPage(value) {
				solidCodePage(value).then(res => {
					this.res = res.value;
					this.solidCodeDatas = res.value.list;
//					if(res.value.total == 0) {
//						this.$message({
//							showClose: true,
//							message: this.$t('inputBox.queryErr'),
//							type: 'error'
//						});
//					}
				})
			},
			//分页的方法
			handleSizeChange(val) {
				this.searchDeviceData.pageSize = val;
				this.handleFilter();
			},
			handleCurrentChange(val) {
				this.searchDeviceData.page = val;
				this.handleFilter();
			},
			formatObj(obj) {
				let arr = Object.keys(obj);
				for(let i = 0; i < arr.length; i++) {
					if(obj[arr[i]] === '') {
						obj[arr[i]] = null;
					}
				}
			},
		}
	}
</script>

<style scoped="scoped">
	.management {
		padding: 30px 0;
	}
	
	.code-box ul {
		height: 180px;
		overflow: hidden;
		position: relative;
	}
	
	.code-box ul i {
		position: absolute;
		top: 80px;
	}
	
	.el-icon-arrow-left {
		left: 0;
	}
	
	.el-icon-arrow-right {
		right: 0;
	}
	
	.code-box ul li {
		height: 180px;
		width: 100px;
		margin: 0 10px;
		float: left;
		list-style: none;
		text-align: center;
	}
	
	.code-box ul li img {
		width: 80px;
		height: 80px;
	}
</style>